<script setup>
import { ref, onMounted, computed, watch } from 'vue'
const total = ref(0)
const isStream = defineModel()
const duration = computed(() => Math.floor(total.value / 5))
let errorTimer = null
watch(isStream, (n) => {
  if (n) {
    clearTimeout(errorTimer)
    errorTimer = null
  }
})
onMounted(() => {
  const timer = setInterval(() => {
    if (total.value == 98) {
      clearInterval(timer)
      return
    }
    total.value++
  }, 20)
})
</script>
<template>
  <div
    v-show="!isStream"
    class="load-game absolute bottom-[80px] left-[50%] translate-x-[-50%] z-[10]"
  >
    <div class="space-y-[30px]">
      <div class="bg-[#292b3b] p-[20px] rounded-[150px]">
        <ul class="space-y-[10px] pl-[40px] text-[16px] list-disc">
          <li>程序启动后，请点击开启全屏模式，用户体验更佳</li>
          <li>遇到程序卡死等问题，请尝试刷新网页或更换浏览器</li>
          <li>遇到鼠标消失时，请点击ESC键解锁鼠标</li>
        </ul>
      </div>
      <div class="text-[24px] tracking-[1px] text-center">程序正在启动中, 请耐心等待...</div>
      <el-progress
        :text-inside="true"
        :show-text="false"
        :stroke-width="20"
        :percentage="total"
        striped
        striped-flow
        :duration="duration"
        style="width: 800px"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-progress-bar__outer) {
  background: rgba(0, 0, 0, 0.5);
}
</style>
